<template>
  <div class="goods-page">
    <div class="goods-box">
      <Good v-for="phone of props.phones" :key="phone.id" :phone="phone" />
    </div>
  </div>
</template>

<script setup>
import Good from "@/components/Good.vue";
import { defineProps } from "vue";

const props = defineProps({
  phones: {
    type: Array,
    required: true
  }
});
</script>

<style scoped>
.goods-page {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-sizing: border-box;
}
.goods-box {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 5px;
}
</style>
